<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common2 :: common_head(~{::title},~{},~{})">
    <title>实时案卷锁定</title>
</head>
<body>
<script type="text/javascript">

    var queryParams = {
        QUERY_PARAM:'query_ajid',
        QUERY_PARAM_XMMC:'query_xmmc'
    };

    Ext.onReady(function () {
        // 定义统计配置类实体的数据模型
        var model = Ext.create('Ext.data.Model', {
            fields: [
                {
                    type: 'string',
                    name: 'ajid' //案卷id
                }, {
                    type: 'string',
                    name: 'lockTime'//锁定时间
                }, {
                    type: 'string',
                    name: 'lockExistTime' //锁存在时间
                }, {
                    type: 'string',
                    name: 'expireTime' //锁剩余时间
                },{
                    type: 'string',
                    name: 'xmmc' //项目名称
                }
            ]
        });

        var store = Ext.create('Ext.data.Store', {
            model: model,
            autoLoad: true,
            start: 0,
            limit: 10,
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read:  GS.global.ctxPath + '/redislock/getRedisInfo'
                },
                actionMethods: {
                    read: 'POST', // Store设置请求的方法，与Ajax请求有区别
                },
                /**设置读取方式*/
                reader: {
                    type: 'json',
                    rootProperty: 'data.records',
                    totalProperty: 'data.total'
                }
            },
            listeners:{
                'beforeload':function (store, op, options) {
                    var params = {
                        query_ajid:Ext.getCmp(queryParams.QUERY_PARAM).getValue(),
                        query_xmmc:Ext.getCmp(queryParams.QUERY_PARAM_XMMC).getValue()
                    };
                    Ext.apply(store.proxy.extraParams, params);
                }
            }
        });

        /**分页*/
        var pageCombo = Ext.create('Ext.form.ComboBox', {
            name: 'pagesize',
            hiddenName: 'pagesize',
            store: new Ext.data.ArrayStore({
                fields: ['text', 'value'],
                data: [
                    ['10',10],['20', 20], ['50', 50]
                ]
            }),
            valueField: 'value',
            displayField: 'text',
            emptyText: 10,
            width: 50
        });

        //添加下拉显示条数菜单选中事件
        pageCombo.on("change", function (comboBox) {
            var pagingToolbar = Ext.getCmp('pagingbar');
            pagingToolbar.pageSize = parseInt(comboBox.getValue());
            var itemsPerPage = parseInt(comboBox.getValue());//更改全局变量itemsPerPage
            store.pageSize = itemsPerPage;
            store.loadPage(1);
        });

        var grid = Ext.create('Ext.grid.Panel', {
            id:"myGrid",
            title: 'redis锁配置页面',
            tbar: [
                {
                    xtype: 'textfield',
                    id: queryParams.QUERY_PARAM,
                    name: queryParams.QUERY_PARAM,
                    emptyText: '请输入案卷id...',
                },
                {
                    xtype: 'textfield',
                    id: queryParams.QUERY_PARAM_XMMC,
                    name: queryParams.QUERY_PARAM_XMMC,
                    emptyText: '请输入项目名称...',
                },{
                    xtype: 'button',
                    id: 'btnStuListQuery',
                    text: '查询',
                    iconCls: 'Preview',
                    handler:function () {
                        var ajInput=Ext.getCmp(queryParams.QUERY_PARAM).value;
                        var xmmcInput=Ext.getCmp(queryParams.QUERY_PARAM_XMMC).value;
                        if(ajInput!=="" && xmmcInput!==""){
                            Ext.Msg.alert("提示","请勿同时输入案卷id和项目名称查询！");
                        }else{
                            debugger;
                            store.loadPage(1);
                        }
                    }
                }, {
                    xtype: 'button',
                    id: 'btnStuListReset',
                    iconCls: 'Arrowrefresh',
                    text: '刷新',
                    handler:function () {
                        Ext.getCmp(queryParams.QUERY_PARAM).reset();
                        Ext.getCmp(queryParams.QUERY_PARAM_XMMC).reset();
                        store.loadPage(1);
                    }
                },
            ],
            dockedItems: [{
                id: 'pagingbar',
                xtype: 'pagingtoolbar',
                store: store,
                dock: 'bottom',
                displayInfo: true,
                autoScroll: true,
                beforePageText: "第",// update
                afterPageText: "页  共 {0} 页",// update
                firstText: "第一页",
                prevText: "上一页",// update
                nextText: "下一页",
                lastText: "最后页",
                refreshText: "刷新",
                displayMsg: "显示 {0} - {1}条，共 {2} 条",// update
                emptyMsg: '没有数据',
                items: ['-', '每页显示', pageCombo, '条']//此处是将创建的combobox添加到工具栏中
            }],
            store: store,
            columns: [
                {
                    xtype: 'rownumberer',
                    header: '行号',
                    renderer: function (value, metadata, record, rowIndex) {
                        return (rowIndex + 1);
                    },
                    width: 50,
                    align: 'center',
                },
                {
                    text: '项目名称',
                    dataIndex: 'xmmc',
                    width: 370,
                },
                {
                    text: '案卷id',
                    dataIndex: 'ajid',
                    width: 250,
                },
                {
                    text: '上锁时间',
                    dataIndex: 'lockTime',
                    width: 190,
                },
                {
                    text: '锁存在时间',
                    dataIndex: 'lockExistTime',
                    width: 150,
                },
                {
                    text: '锁剩余时间',
                    width: 150,
                    dataIndex: 'expireTime'
                }, {
                    text: '操作',
                    dataIndex: 'cz',
                    flex: 10,
                    renderer: function (value, metaData, record) {
                        var id = Ext.id();
                        var buttonId = "btn_" + record.data.id;
                        metaData.tdAttr = 'data-qtip="提示信息"';
                        Ext.defer(function () {
                            Ext.widget('toolbar', {
                                renderTo: id,
                                dock: 'top',
                                style: 'margin:0',
                                ui: 'footer',
                                height: 40,
                                width: 200,
                                items: [
                                    {
                                        xtype: 'button',
                                        width: 80,
                                        height: 30,
                                        id: buttonId,
                                        text: '解除锁',
                                        handler: function () {
                                            /**浏览器兼容性问题，使用这个方法**/
                                            var record_id = this.id.split("_")[1];
                                            var dataArray = Ext.getCmp("myGrid").store.data.items;
                                            var ajIdChoose = "";
                                            for (var i = 0; i < dataArray.length; i++) {
                                                if (dataArray[i].id === parseInt(record_id)) {
                                                    ajIdChoose = dataArray[i].data.ajid;
                                                }
                                            }
                                            Ext.MessageBox.confirm("提示", "确认解锁此案卷？", function (btnId) {
                                                if (btnId == "yes") {
                                                    Ext.Ajax.request({
                                                        method: 'GET',
                                                        url: GS.global.ctxPath + '/redislock/delete',
                                                        params: {
                                                            'ajid': ajIdChoose
                                                        },
                                                        success: function (response, config) {
                                                            Ext.Msg.alert('提示', '删除成功!');
                                                            Ext.getCmp(queryParams.QUERY_PARAM).reset();
                                                            store.loadPage(1);//重新加载数据
                                                        },
                                                        failure: function () {
                                                            Ext.Msg.alert('提示', '删除失败!');
                                                        }
                                                    });
                                                }
                                                else if (btnId == "no") {
                                                    return false;
                                                }
                                                else {
                                                    return false;
                                                }
                                            });


                                        }
                                    }
                                ]
                            });
                        }, 50);
                        return Ext.String.format('<div id="{0}"></div>', id);
                    }
                }
            ],
            listeners: {
            }
        });

        new Ext.Viewport({
            layout: 'fit',
            items: [grid]
        });

    });
</script>
</body>
</html>